<template>
  <div class="content">
	  
   <div class="login" style="margin-top: -50px;">
	   <van-uploader v-model="fileList" multiple :max-count="1"/>
   </div>
   
   <van-form @submit="onSubmit">
     <van-field
       v-model="username"
       name="用户名"
       label="用户名"
       placeholder="手机号/邮箱/会员名"
       :rules="[{ required: true, message: '请填写用户名' }]"
     />
     <van-field
       v-model="password"
       type="password"
       name="密码"
       label="密码"
       placeholder="密码"
       :rules="[{ required: true, message: '请填写密码' }]"
     />
	 <van-field
	   v-model="nikename"
	   type="text"
	   name="昵称"
	   label="昵称"
	   placeholder="昵称"
	   :rules="[{ required: true, message: '请填写昵称' }]"
	 />
	 
	 
	 <div class="box">
		 <div class="msg" v-show="change">{{mess}}</div>
		 <button @click="tologin" class="reg">找回密码</button>
		 <button @click="tologin" class="changeweb">去登陆</button>
	 </div>
	 
	 
     <div style="margin: 16px;">
       <van-button 
	   round 
	   block 
	   type="primary" 
	   native-type="submit" 
	   style='background: #ff5000;border: none;margin-top: 10px;'
	   >注册</van-button>
     </div>
	 
	 
   </van-form>
  </div>
</template>

<script>

import { Dialog } from 'vant';
 export default {
	 
     name:'reg',
     data(){
       return {
         username:'',
         password:'',
		 nikename:'',
         mess:'该用户名已被注册',
		 change:false,
		 fileList: [
		         // { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' ,isImage: true},
		         // Uploader 根据文件后缀来判断是否为图片文件
		         // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
		         // { url: 'https://cloud-image', isImage: true },
		       ],
       }
     },
     methods:{
		 tologin(){
		 			this.$router.push('/login')
		 },
        onSubmit(values) {
             // console.log('submit', values);
			 let formData = new FormData();
			 formData.append('username',this.username);
			 formData.append('password',this.password);
			 formData.append('icon',this.fileList[0].file);
			 formData.append('nikename',this.nikename)
			 
			 
			 // axios的具体业务
			this.$axios.post(
			'/reg',
			formData,
			).then(
						res=>{
							console.log(res);
							
							if(res.data.err==0){
								this.change=false
								// 弹出框显示
								Dialog.confirm({
								  title: '登录成功',
								  message: '是否跳转到登录页面@~@',
								})
								  .then(() => {
									  console.log(111);
									this.$router.push('/login')
								  })
								  .catch(() => {
								    // on cancel
									console.log(222)
								  });
							}else{
								this.change=true
							}
						}
				)
           },
		},
	
   }
</script>


<style scoped>
	.content{
		background-image: url(../assets/img/background_01.jpg);
		background-repeat:no-repeat;
		background-size:cover;
		height: 400px;
		padding-top: 115px;
		}
.login_l{margin-top: 20px;}
.login{height: 80px;width: 100%;text-align: center;margin-top: 30px;margin-bottom: 40px;}
.login img{width: 80px; height: 80px; margin-top: -50px;}
.box{width: 100%;height: 30px;margin-top: 25px;}
.msg{font-size: 14px;color: #555;margin-left: 15px;float: left;line-height: 30px;border: none;background-color: seagreen;}
.reg{font-size: 10px;color: #FFFFFF;margin-left: 15px;float: right;line-height: 30px;border: none;background-color: #ff5000;border-radius: 15px;}
.changeweb{font-size: 10px;color: #FFFFFF;margin-left: 15px;float: left;line-height: 30px;border: none;background-color: #ff5000;border-radius: 15px;}

.van-cell {background: rgba(0,0,0,0);}
</style>

